<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类列表</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/classify-list.css">
</head>
<body>
<div id="main-menu">
    <script type="text/html" id="mainMenuTemp">
        {{each}}
        <div class="menu-item" data-id="{{$value.id}}" data-name="{{$value.dictName}}">
            <div class="menu-item-wrap marquee">{{$value.dictName}}</div>
        </div>
        {{/each}}
    </script>
    <!--<div class="menu-item active">-->
    <!--<div class="menu-item-wrap">视频</div>-->
    <!--</div>-->
    <!--<div class="menu-item leave">-->
    <!--<div class="menu-item-wrap">微视频</div>-->
    <!--</div>-->
</div>
<div id="sub-menu">
    <script type="text/html" id="subMenuTemp">
        {{each}}
        <div class="menu-item" data-id="{{$value.id}}">
            <div class="menu-item-wrap marquee">{{$value.dictName}}</div>
        </div>
        {{/each}}
    </script>

    <!--<div class="menu-item">-->
    <!--<div class="menu-item-wrap">情感</div>-->
    <!--</div>-->
    <!--<div class="menu-item leave">-->
    <!--<div class="menu-item-wrap">情感</div>-->
    <!--</div>-->
    <!--<div class="menu-item active">-->
    <!--<div class="menu-item-wrap">情感</div>-->
    <!--</div>-->
    <!--<div class="menu-item">-->
    <!--<div class="menu-item-wrap">情感</div>-->
    <!--</div>-->
</div>
<div id="content">
    <div class="left-box">
        <div class="img">
            <img id="leftImg" src="" alt="">
        </div>
        <div id="leftName" class="name"><!--视频娱乐--></div>
    </div>
    <div class="right-box card001">
        <script type="text/html" id="listTemp">
            {{each}}
            <div class="list-item" data-url="work-details.html?id={{$value.id}}">
                <div class="list-item-wrap">
                    {{if $value.order==1}}
                    <div class="status status-1">已订阅</div>
                    {{/if}}
                    <div class="statistics">
                        <div class="viewNum">
                            <img src="../images/module/card/img-title-like-view-status-card001/view.png" alt="">
                            <p>{{$value.clickNums}}</p>
                        </div>
                        <div class="likeNum">
                            <img src="../images/module/card/img-title-like-view-status-card001/like.png" alt="">
                            <p>{{$value.collectNumber}}</p>
                        </div>
                    </div>
                    <div class="thumb">
                        <img src="{{$value.poster|getCover}}" alt="" onerror="this.src='../images/default.png'">
                    </div>
                    <div class="mask"></div>
                    <div class="name">{{$value.titleName}}</div>
                </div>
            </div>
            {{/each}}
        </script>
    </div>
</div>

<div id="sponsor">主办单位：四川省新闻出版广电局 &nbsp;&nbsp;&nbsp;&nbsp;四川省版权局 &nbsp;&nbsp;&nbsp;&nbsp;四川省有线广播电视网络股份有限公司</div>
<div id="pageControl">
    <div id="prev"><img src="../images/classify-list/prev.png" alt=""></div>
    翻页
    <div id="next"><img src="../images/classify-list/next.png" alt=""></div>
</div>
<div id="pageInfo">
    <span class="curPage">1/</span><span class="totalPage">1</span>
</div>

<script src="../js/S.js"></script>
<script src="../js/common.js"></script>
<script src="../js/tvProcess.js"></script>
<script src="../js/template-web.js"></script>
<script src="../js/list.js"></script>
<script src="../js/dialog.js"></script>
<script>
    /**
     * DEMO测试数据正式环境请删除
     * 创建于西南版权交易中心项目
     */
    tools.test('http://10.0.1.122:8080/CMSInterfaceManage/myServletControls.do?action=getMenusByFileJson&fname=configs/copyright/configs_web.json',
        '11126d834032346d1bc87380363bf4d8084616fd4a13b58dac9f71cd41910810014de7b10c12c0142576824fe4af74e3d7d3027cfc2c07e08b96f5410644b398bb4051fa4f6cd975420bc31500795a12e8a0f8d3c4fbbdeae644460fec9ffd42dda5c0542b838e638e0add412cda91b4c3ef6deae1392ca5e59edaea328e46350b43027bffa362095d9d67b50e3e2a1e71e118a757349dd5592b909fd6442ba56041b872e9d0644161bbdba28f4ab7227ddd534352a7fd2a88a7bf77afa84ce2bce86b6f358c6797b836208c15792e856a')
    keyopt.options.focusElm = 'mainMenuItem1';
    //        $('#main-menu .menu-item').position(0,0,0,130,5,5);
    //        $('#sub-menu .menu-item').position(0,0,0,130,5,5);
    //        $('.list-item').position(0,0,4,4,4,3);

    var id=tools.getUrlParam('id');

    var mainMenuLeaveSave = tools.getSave('mainMenuLeaveSave') ? tools.getSave('mainMenuLeaveSave') : 'mainMenuItem1';
    var subMenuLeaveSave = tools.getSave('subMenuLeaveSave') ? tools.getSave('subMenuLeaveSave') : 'subMenuItem1';
    var mainMenuIdSave = tools.getSave('mainMenuIdSave') ? tools.getSave('mainMenuIdSave') : '';
    var subMenuIdSave = tools.getSave('subMenuIdSave') ? tools.getSave('subMenuIdSave') : '';

    var page = tools.getSave('page') ? tools.getSave('page') - 1 : 0;
    var firstView=true;
    var mainMenuList = new List({
        action: 'getYiJiDictionaryList',
        tempId: 'mainMenuTemp',
        itemClassName: 'menu-item',
        idPrefix: 'main',
        col: 10,
        params: {
            parentId: '0',
            dictType: '0',
            pageIndex: '0',
            pageSize: 10
        },
        callback: function (data) {


            mainMenuList.setListOnSubmit(function (code, id) {
                var dataId = document.getElementById(id).dataset.id;
                var dataNmae = document.getElementById(id).dataset.name;
                changeLeftImgByName(dataNmae);
//                    new Dialog(id).alert(dataId)
                mainMenuIdSave = dataId;
                subMenuList.setParams({parentId: dataId}).getData().addPositionControl(0, 0, 0, 30, 5, 5);
                mainMenuLeaveSave = id;
                subMenuLeaveSave = 'subMenuItem1';
                document.getElementById('sub-menu').style.left = null;
            });
            mainMenuList.setListOnBlur(function (code, id) {
                if (code === 'go_bottom') {
                    $('#main-menu .leave').removeClass('leave');
                    $('#' + mainMenuLeaveSave).addClass('leave')
                }
                itemScroll(mainMenuLeaveSave)
            });

            mainMenuList.setListOnFocus(function (code, id) {
                $('#main-menu .leave').removeClass('leave');
                itemScroll(id)
            });
            if (mainMenuIdSave === '') {
                mainMenuIdSave = id||data.datas[0].id;
                for(var i=0;i<data.datas.length;i++){
                    if(data.datas[i].id===mainMenuIdSave){
                        changeLeftImgByName(data.datas[i].dictName);
                        mainMenuLeaveSave='mainMenuItem'+(i+1);
                        keyopt.moveToElm(mainMenuLeaveSave)
                    }
                }
            }
            subMenuList.setParams({parentId: mainMenuIdSave}).getData().addPositionControl(0, 0, 0, 30, 5, 5);

        }
    });
    var subMenuList = new List({
        action: 'getYiJiDictionaryList',
        tempId: 'subMenuTemp',
        itemClassName: 'menu-item',
        idPrefix: 'sub',
        col: 10,
        params: {
            parentId: '0',
            dictType: '0',
            pageIndex: '0',
            pageSize: 5
        },
        callback: function (data) {
            subMenuList.setListGoTop(mainMenuLeaveSave);
            mainMenuList.setListGoBottom(subMenuLeaveSave);
            if (subMenuIdSave && firstView) {
                firstView=false;
                cardList.setParams({stairColumnId: subMenuIdSave}).getData().addPositionControl(0, 0, 4, 4, 4, 2).addKeyPressControl();
            }else {
                cardList.setParams({stairColumnId: data.datas[0].id,pageIndex:'0'}).getData().addPositionControl(0, 0, 4, 4, 4, 2).addKeyPressControl();
            }
            subMenuList.setListOnSubmit(function (code, id) {
                var dataId = document.getElementById(id).dataset.id;
//                    new Dialog(id).alert(dataId)
                subMenuIdSave = dataId;
                cardList.setParams({stairColumnId: dataId,pageIndex:'0'}).getData().addPositionControl(0, 0, 4, 4, 4, 2).addKeyPressControl();
                subMenuLeaveSave = id;
                mainMenuList.setListGoBottom(subMenuLeaveSave);
            });
            subMenuList.setListOnFocus(function (code, id) {
                itemScroll(id)
            });
            subMenuList.setListOnBlur(function (code, id) {
                if (code === 'go_bottom') {
                    $('#main-menu .leave').removeClass('leave');
                    $('#' + mainMenuLeaveSave).addClass('leave')
                }
                itemScroll(subMenuLeaveSave)
            });
        }
    });
    var cardList = new List({
        action: 'getProductBaseInfoList',
        col: 3,
        params: {
            menuId: '',
            stairColumnId: '0',
            pageIndex: page,
            pageSize: 6,
            choice: 0
        },
        callback: function (data) {
            subMenuList.setListGoBottom('listItem1');
            cardList.setListGoTop(subMenuLeaveSave);

            $('#pageInfo').html('<span class="curPage">' + cardList.def.currentPage + '/</span><span class="totalPage">' + cardList.def.totalPage + '</span>')

//                if(data.datas.length===0){
//                    new Dialog(subMenuLeaveSave).alert('没有更多数据');
//                }


            tools.recoveryFocus();
            cardList.setListOnSubmit(function (code, id) {
                tools.saveFocus({
                    page: cardList.def.currentPage,
                    mainMenuIdSave: mainMenuIdSave,
                    subMenuIdSave: subMenuIdSave,
                    subMenuLeaveSave: subMenuLeaveSave,
                    mainMenuLeaveSave: mainMenuLeaveSave
                });
            })
        }
    });

    mainMenuList.getData().addPositionControl(0, 0, 0, 34, 5, 5);


    function itemScroll(id) {
        var offsetLeft = document.getElementById(id).offsetLeft;
        var offsetWidth = document.getElementById(id).offsetWidth;
        console.log(offsetLeft, offsetWidth);
        if (offsetLeft > 1040) {
            document.getElementById(id).parentNode.style.left = -offsetLeft + 1040 + 60 + 'px'
        } else {
            document.getElementById(id).parentNode.style.left = null
        }
    }

    function changeLeftImgByName(name) {
        var baseImgPath = '../images/classify-list/';
        var imgUrl = '';
        switch (name) {
            case '视频娱乐':
                imgUrl = baseImgPath + 'spyl.png';
                break;
            case '摄影美术':
                imgUrl = baseImgPath + 'syms.png';
                break;
            case '新闻文学':
                imgUrl = baseImgPath + 'xwwx.png';
                break;
            case '计算机软件':
                imgUrl = baseImgPath + 'jsjrj.png';
                break;
            case '音乐曲艺':
                imgUrl = baseImgPath + 'yyqy.png';
                break;
            default:
                imgUrl = '';
                break;
        }

        $('#leftImg').attr('src', imgUrl);
        $('#leftName').text(name);
    }
</script>
</body>
</html>